<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Skeleton</h1>
        <p>Skeleton is a placeholder to display instead of the actual content.</p>
    </div>
    <app-demoActions github="skeleton" stackblitz="skeleton-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <div class="grid formgrid">
            <div class="field col-12 md:col-6">
                <h5>Rectangle</h5>
                <p-skeleton styleClass="mb-2"></p-skeleton>
                <p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
                <p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
                <p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
                <p-skeleton width="10rem" height="4rem"></p-skeleton>
            </div>
            <div class="field col-12 md:col-6">
                <h5>Rounded</h5>
                <p-skeleton styleClass="mb-2" borderRadius="16px"></p-skeleton>
                <p-skeleton width="10rem" styleClass="mb-2" borderRadius="16px"></p-skeleton>
                <p-skeleton width="5rem" styleClass="mb-2" borderRadius="16px"></p-skeleton>
                <p-skeleton height="2rem" styleClass="mb-2" borderRadius="16px"></p-skeleton>
                <p-skeleton width="10rem" height="4rem" borderRadius="16px"></p-skeleton>
            </div>
            <div class="field col-12 md:col-6">
                <h5 class="mt-3">Square</h5>
                <div class="flex align-items-end">
                    <p-skeleton size="2rem" styleClass="mr-2"></p-skeleton>
                    <p-skeleton size="3rem" styleClass="mr-2"></p-skeleton>
                    <p-skeleton size="4rem" styleClass="mr-2"></p-skeleton>
                    <p-skeleton size="5rem"></p-skeleton>
                </div>
            </div>
            <div class="field col-12 md:col-6">
                <h5 class="mt-3">Circle</h5>
                <div class="flex align-items-end">
                    <p-skeleton shape="circle" size="2rem" styleClass="mr-2"></p-skeleton>
                    <p-skeleton shape="circle" size="3rem" styleClass="mr-2"></p-skeleton>
                    <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
                    <p-skeleton shape="circle" size="5rem"></p-skeleton>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="grid formgrid">
            <div class="field col-12 md:col-6 md:pr-6 pr-0">
                <h5>Card</h5>
                <div class="custom-skeleton p-4">
                    <div class="flex mb-3">
                        <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
                        <div>
                            <p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
                            <p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
                            <p-skeleton height=".5rem"></p-skeleton>
                        </div>
                    </div>
                    <p-skeleton width="100%" height="150px"></p-skeleton>
                    <div class="flex justify-content-between mt-3">
                        <p-skeleton width="4rem" height="2rem"></p-skeleton>
                        <p-skeleton width="4rem" height="2rem"></p-skeleton>
                    </div>
                </div>
            </div>
            <div class="field col-12 md:col-6">
                <h5>List</h5>
                <div class="custom-skeleton p-4">
                    <ul class="m-0 o-0">
                        <li class="mb-3">
                            <div class="flex">
                                <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
                                <div style="flex: 1">
                                    <p-skeleton width="100%" styleClass="mb-2"></p-skeleton>
                                    <p-skeleton width="75%"></p-skeleton>
                                </div>
                            </div>
                        </li>
                        <li class="mb-3">
                            <div class="flex">
                                <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
                                <div style="flex: 1">
                                    <p-skeleton width="100%" styleClass="mb-2"></p-skeleton>
                                    <p-skeleton width="75%"></p-skeleton>
                                </div>
                            </div>
                        </li>
                        <li class="mb-3">
                            <div class="flex">
                                <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
                                <div style="flex: 1">
                                    <p-skeleton width="100%" styleClass="mb-2"></p-skeleton>
                                    <p-skeleton width="75%"></p-skeleton>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="flex">
                                <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
                                <div style="flex: 1">
                                    <p-skeleton width="100%" styleClass="mb-2"></p-skeleton>
                                    <p-skeleton width="75%"></p-skeleton>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <h5>DataTable</h5>
        <p-table [value]="products" responsiveLayout="scroll">
            <ng-template pTemplate="header">
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Quantity</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr>
                    <td><p-skeleton></p-skeleton></td>
                    <td><p-skeleton></p-skeleton></td>
                    <td><p-skeleton></p-skeleton></td>
                    <td><p-skeleton></p-skeleton></td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;SkeletonModule&#125; from 'primeng/skeleton';
</app-code>
            <h5>Getting Started</h5>
            <p>Skeleton displays a rectangle in its simplest form.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-skeleton&gt;&lt;/p-skeleton&gt;
</app-code>

            <h5>Circle</h5>
            <p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-skeleton shape="circle"&gt;&lt;/p-skeleton&gt;
</app-code>

            <h5>Size</h5>
            <p>In order to customize the size, use <i>width</i> and <i>height</i> properties for rectangles and <i>size</i> for Circle and Square shapes.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-skeleton width="100%" height="2rem"&gt;&lt;/p-skeleton&gt;
&lt;p-skeleton shape="circle" size="50px"&gt;&lt;/p-skeleton&gt;
</app-code>

            <h5>Border Radius</h5>
            <p>The default border radius of a rectangle is specified by the theme and can be overriden using the <i>borderRadius</i> property.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-skeleton borderRadius="16px"&gt;&lt;/p-skeleton&gt;
</app-code>

            <h5>Animation</h5>
            <p>Animation can be turned of by setting <i>animation</i> to "none".</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-skeleton animation="none"&gt;&lt;/p-skeleton&gt;
</app-code>

                <h5>Properties</h5>
                <div class="doc-tablewrapper">
					<table class="doc-table">
						<thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Default</th>
                                <th>Description</th>
                            </tr>
						</thead>
						<tbody>
                            <tr>
                                <td>shape</td>
                                <td>string</td>
                                <td>rectangle</td>
                                <td>Shape of the element, options are "rectangle" and "circle".</td>
                            </tr>
							<tr>
                                <td>size</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Size of the Circle or Square.</td>
                            </tr>
							<tr>
                                <td>width</td>
                                <td>string</td>
                                <td>100%</td>
                                <td>Width of the element.</td>
                            </tr>
							<tr>
                                <td>height</td>
                                <td>string</td>
                                <td>1rem</td>
                                <td>Height of the element.</td>
                            </tr>
							<tr>
                                <td>borderRadius</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Border radius of the element, defaults to value from theme.</td>
                            </tr>
							<tr>
                                <td>animation</td>
                                <td>string</td>
                                <td>wave</td>
                                <td>Type of the animation, valid options are "wave" and "none".</td>
                            </tr>
                            <tr>
                                <td>style</td>
                                <td>object</td>
                                <td>null</td>
                                <td>Inline style of the component.</td>
                            </tr>
                            <tr>
                                <td>styleClass</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Style class of the component.</td>
                            </tr>
						</tbody>
					</table>
                </div>

				<h5>Styling</h5>
				<p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming</a> page.</p>
				<div class="doc-tablewrapper">
					<table class="doc-table">
						<thead>
                            <tr>
                                <th>Name</th>
                                <th>Element</th>
                            </tr>
						</thead>
						<tbody>
                            <tr>
                                <td>p-skeleton</td>
                                <td>Container element.</td>
                            </tr>
                            <tr>
                                <td>p-skeleton-circle</td>
                                <td>Container element of a determinate progressbar.</td>
                            </tr>
                            <tr>
                                <td>p-skeleton-animation-none</td>
                                <td>Container element of an indeterminate progressbar.</td>
                            </tr>
						</tbody>
					</table>
				</div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/skeleton" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-skeleton-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;div class="grid formgrid"&gt;
        &lt;div class="field col-12 md:col-6"&gt;
            &lt;h5&gt;Rectangle&lt;/h5&gt;
            &lt;p-skeleton styleClass="mb-2"&gt;&lt;/p-skeleton&gt;
            &lt;p-skeleton width="10rem" styleClass="mb-2"&gt;&lt;/p-skeleton&gt;
            &lt;p-skeleton width="5rem" styleClass="mb-2"&gt;&lt;/p-skeleton&gt;
            &lt;p-skeleton height="2rem" styleClass="mb-2"&gt;&lt;/p-skeleton&gt;
            &lt;p-skeleton width="10rem" height="4rem"&gt;&lt;/p-skeleton&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-6"&gt;
            &lt;h5&gt;Rounded&lt;/h5&gt;
            &lt;p-skeleton styleClass="mb-2" borderRadius="16px"&gt;&lt;/p-skeleton&gt;
            &lt;p-skeleton width="10rem" styleClass="mb-2" borderRadius="16px"&gt;&lt;/p-skeleton&gt;
            &lt;p-skeleton width="5rem" styleClass="mb-2" borderRadius="16px"&gt;&lt;/p-skeleton&gt;
            &lt;p-skeleton height="2rem" styleClass="mb-2" borderRadius="16px"&gt;&lt;/p-skeleton&gt;
            &lt;p-skeleton width="10rem" height="4rem" borderRadius="16px"&gt;&lt;/p-skeleton&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-6"&gt;
            &lt;h5 class="mt-3"&gt;Square&lt;/h5&gt;
            &lt;div class="flex align-items-end"&gt;
                &lt;p-skeleton size="2rem" styleClass="mr-2"&gt;&lt;/p-skeleton&gt;
                &lt;p-skeleton size="3rem" styleClass="mr-2"&gt;&lt;/p-skeleton&gt;
                &lt;p-skeleton size="4rem" styleClass="mr-2"&gt;&lt;/p-skeleton&gt;
                &lt;p-skeleton size="5rem"&gt;&lt;/p-skeleton&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-6"&gt;
            &lt;h5 class="mt-3"&gt;Circle&lt;/h5&gt;
            &lt;div class="flex align-items-end"&gt;
                &lt;p-skeleton shape="circle" size="2rem" styleClass="mr-2"&gt;&lt;/p-skeleton&gt;
                &lt;p-skeleton shape="circle" size="3rem" styleClass="mr-2"&gt;&lt;/p-skeleton&gt;
                &lt;p-skeleton shape="circle" size="4rem" styleClass="mr-2"&gt;&lt;/p-skeleton&gt;
                &lt;p-skeleton shape="circle" size="5rem"&gt;&lt;/p-skeleton&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;div class="grid formgrid"&gt;
        &lt;div class="field col-12 md:col-6 md:pr-6 pr-0"&gt;
            &lt;h5&gt;Card&lt;/h5&gt;
            &lt;div class="custom-skeleton p-4"&gt;
                &lt;div class="flex mb-3"&gt;
                    &lt;p-skeleton shape="circle" size="4rem" styleClass="mr-2"&gt;&lt;/p-skeleton&gt;
                    &lt;div&gt;
                        &lt;p-skeleton width="10rem" styleClass="mb-2"&gt;&lt;/p-skeleton&gt;
                        &lt;p-skeleton width="5rem" styleClass="mb-2"&gt;&lt;/p-skeleton&gt;
                        &lt;p-skeleton height=".5rem"&gt;&lt;/p-skeleton&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;p-skeleton width="100%" height="150px"&gt;&lt;/p-skeleton&gt;
                &lt;div class="flex justify-content-between mt-3"&gt;
                    &lt;p-skeleton width="4rem" height="2rem"&gt;&lt;/p-skeleton&gt;
                    &lt;p-skeleton width="4rem" height="2rem"&gt;&lt;/p-skeleton&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-6"&gt;
            &lt;h5&gt;List&lt;/h5&gt;
            &lt;div class="custom-skeleton p-4"&gt;
                &lt;ul class="m-0 o-0"&gt;
                    &lt;li class="mb-3"&gt;
                        &lt;div class="flex"&gt;
                            &lt;p-skeleton shape="circle" size="4rem" styleClass="mr-2"&gt;&lt;/p-skeleton&gt;
                            &lt;div style="flex: 1"&gt;
                                &lt;p-skeleton width="100%" styleClass="mb-2"&gt;&lt;/p-skeleton&gt;
                                &lt;p-skeleton width="75%"&gt;&lt;/p-skeleton&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="mb-3"&gt;
                        &lt;div class="flex"&gt;
                            &lt;p-skeleton shape="circle" size="4rem" styleClass="mr-2"&gt;&lt;/p-skeleton&gt;
                            &lt;div style="flex: 1"&gt;
                                &lt;p-skeleton width="100%" styleClass="mb-2"&gt;&lt;/p-skeleton&gt;
                                &lt;p-skeleton width="75%"&gt;&lt;/p-skeleton&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="mb-3"&gt;
                        &lt;div class="flex"&gt;
                            &lt;p-skeleton shape="circle" size="4rem" styleClass="mr-2"&gt;&lt;/p-skeleton&gt;
                            &lt;div style="flex: 1"&gt;
                                &lt;p-skeleton width="100%" styleClass="mb-2"&gt;&lt;/p-skeleton&gt;
                                &lt;p-skeleton width="75%"&gt;&lt;/p-skeleton&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;div class="flex"&gt;
                            &lt;p-skeleton shape="circle" size="4rem" styleClass="mr-2"&gt;&lt;/p-skeleton&gt;
                            &lt;div style="flex: 1"&gt;
                                &lt;p-skeleton width="100%" styleClass="mb-2"&gt;&lt;/p-skeleton&gt;
                                &lt;p-skeleton width="75%"&gt;&lt;/p-skeleton&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;h5&gt;DataTable&lt;/h5&gt;
    &lt;p-table [value]="products" responsiveLayout="scroll"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th&gt;Code&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Category&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;p-skeleton&gt;&lt;/p-skeleton&gt;&lt;/td&gt;
                &lt;td&gt;&lt;p-skeleton&gt;&lt;/p-skeleton&gt;&lt;/td&gt;
                &lt;td&gt;&lt;p-skeleton&gt;&lt;/p-skeleton&gt;&lt;/td&gt;
                &lt;td&gt;&lt;p-skeleton&gt;&lt;/p-skeleton&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-skeleton-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
